<template>
  <!-- 最初版本,比较乱 -->
  <div class="controller">
    <div class="outWall">
      <div
        class="ball"
        id="controllerBall"
        :style="{ left: leftCom + 'px', top: topCom + 'px' }"
        @mouseDown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"
      ></div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, watch } from "vue";
export default {
  setup() {
    //绝对定位,初始值是计算好的,正好位于中心
    const top = 75;
    const left = 75;
    //ball的dom元素
    let ball = null;
    //ball的宽高
    let ballWidth = 0;
    let ballHeight = 0;
    //ball的中心坐标(相对于窗口的)
    let ballX = ref(0);
    let ballY = ref(0);
    //鼠标坐标
    let mouseX = ref(0);
    let mouseY = ref(0);
    //绝对定位,top和left的动态形式,因为用watch,所以需要设置初始值为原始初始值
    const topCom = ref(75);
    const leftCom = ref(75);

    //ball的外层div style属性
    let outWall = null;
    let outWallWidth = 0;
    let outWallHeight = 0;

    watch(mouseX, (mouseX) => {
      let offsetX = mouseX - ballX.value;
      console.log("left偏移量", offsetX);
      leftCom.value = left + offsetX;
    });

    watch(mouseY, (mouseY) => {
      let offsetY = mouseY - ballY.value;
      console.log("top偏移量", offsetY);
      topCom.value = top + offsetY;
    });

    onMounted(() => {
      ball = document.querySelector("#controllerBall");
      //ball宽高
      ballWidth = ball.clientWidth;
      ballHeight = ball.clientHeight;
      console.log("ball宽高", { ballWidth, ballHeight });
      ball = ball.getBoundingClientRect();
      //ball的中心坐标
      ballX.value = ball.left + ballWidth / 2;
      ballY.value = ball.top + ballHeight / 2;
      console.log("ball中心坐标", [ballX.value, ballY.value]);

      outWall = document.querySelector(".outWall");
      outWallWidth = outWall.clientWidth;
      outWallHeight = outWall.clientHeight;
    });
    function mouseDown() {}
    function mouseMove(e) {
      let topMax = outWallHeight - ballHeight;
      let leftMax = outWallWidth - ballWidth;
      //更新鼠标坐标
      //允许范围内更新鼠标坐标
      if (
        0 < topCom.value &&
        topCom.value < topMax &&
        0 < leftCom.value &&
        leftCom.value < leftMax
      ) {
        mouseX.value = e.clientX;
        mouseY.value = e.clientY;
      }
      //超出范围后,调整范围
      if (topCom.value == 0) {
        console.log("top低于0");
        mouseY.value++;
      } else if (topCom.value == topMax) {
        console.log("top高于Max");
        mouseY.value--;
      } else if (leftCom.value == 0) {
        console.log("left低于0");
        mouseX.value++;
      } else if (leftCom.value == leftMax) {
        console.log("left高于Max");
        mouseX.value--;
      }
    }
    function mouseUp() {}

    return { topCom, leftCom, mouseDown, mouseMove, mouseUp };
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.controller {
  height: 100vh;
  background-color: #34495e;
  display: flex;
  justify-content: center;
  align-items: center;
  .outWall {
    width: 200px;
    height: 200px;
    border: 2px solid #d35400;
    border-radius: 50%;
    position: fixed;
    left: 30px;
    bottom: 30px;
    .ball {
      width: 50px;
      height: 50px;
      background-color: #2ecc71;
      border-radius: 50%;
      position: absolute;
      transition: 0.7s;
    }
  }
}
</style>